<template>
    <div class="demo-userComp-addressInput">
        <div class="author-demo">
            <div>作者：信姜缘</div>
            <div>日期：2017/11/02</div>
        </div>
        <h2>省市区三级联动效果展示</h2>
        <p style="font-size: 14px">页面加载时将会请求type为province的下拉框数据，在province的下拉框选择值之后回调provinceSelect方法为绑定字段provinceId赋值，provinceId值同时绑定在type 为city的组件上，
            当provinceId的值发生变化时会自动请求type为city的下拉框数据，同理，cityId根据回调函数变化时会引起type为district区下拉框的数据请求，加载下拉列表
        </p>
        <br/>
        <!--效果显示区-->
        省：<address-input ref="province" :type="'province'" @select-change="provinceSelect" :defaultValue="provinceId" ></address-input>{{provinceId}}
        <br/>
        <br/>
        市：<address-input :type="'city'" @select-change="citySelect" :defaultValue="cityId" :parentId="provinceId"></address-input>{{cityId}}
        <br/>
        <br/>
        区：<address-input :type="'district'" @select-change="districtSelect" :defaultValue="districtId" :parentId="cityId"></address-input>{{districtId}}


        <h3 style="margin-top: 50px">JavaScript代码</h3>
        <!-- 显示JavaScript代码 -->
        <pre>
            <code class="javascript">
export default{
      data () {
        return {
          provinceId: '',
          cityId: '',
          districtId: '',
        }
      },
      methods: {
        provinceSelect (val) {
          this.provinceId = val
        },
        citySelect (val) {
          this.cityId = val
        },
        districtSelect (val) {
          this.districtId = val
        }
      },
}
            </code>
        </pre>

        <h3>HTML代码</h3>
            <!-- 显示HTML代码 -->
        <pre>
            <code class="html" v-text="htmlCode">
            </code>
        </pre>


        <h2 style="margin-top: 50px">当组件有默认值时的情形</h2>
        <p style="font-size: 14px">
            在vue实例的data里面指出组件的默认值
        </p>
        省：<address-input :type="'province'" @select-change="provinceSelect2"  :defaultValue="provinceId2"></address-input>{{provinceId2}}
        <br/>
        <br/>
        市：<address-input :type="'city'" @select-change="citySelect2" :parentId="provinceId2" :defaultValue="cityId2" ></address-input>{{cityId2}}
        <br/>
        <br/>
        区：<address-input :type="'district'" @select-change="districtSelect2" :parentId="cityId2" :defaultValue="districtId2" ></address-input>{{districtId2}}

        <h3 style="margin-top: 50px">JavaScript代码</h3>
        <!-- 显示JavaScript代码 -->
        <pre>
            <code class="javascript">
export default{
      data () {
        return {
          provinceId: '402892ae5e713f05015e713f662b00e5 ',
          cityId: '402892ae5e713f05015e713f669900f2',
          districtId: '402892ae5e713f05015e713f66a700f4',
        }
      },
      methods: {
        provinceSelect (val) {
          this.provinceId = val
        },
        citySelect (val) {
          this.cityId = val
        },
        districtSelect (val) {
          this.districtId = val
        }
      },
}
            </code>
        </pre>

        <h3>HTML代码</h3>
        <!-- 显示HTML代码 -->
        <pre>
            <code class="html" v-text="htmlCode">
            </code>
        </pre>



        <div class="api">
            <div class="anchor">
                <!---->
                <h2 id="API">API</h2>
                <!---->
                <!---->
                <!---->
                <!---->
            </div>
            <div class="anchor">
                <!---->
                <!---->
                <h3 id="Select_props">address-input  props</h3>
                <!---->
                <!---->
                <!---->
            </div>
            <table>
                <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>basicUrl</td>
                    <td>组件自定义的请求地址，如果不输入，则按照组件默认的地址请求数据</td>
                    <td>String</td>
                    <td>省市：http://192.168.10.202:7801/pubdata/provinces 区：cities: http://192.168.10.202:7801/pubdata/cities</td>
                </tr>
                <tr>
                    <td>type</td>
                    <td>选择框类型 省|province 市|city 区|district 取英文</td>
                    <td>String</td>
                    <td>province</td>
                </tr>
                <tr>
                    <td>defaultValue</td>
                    <td>组件的默认值</td>
                    <td>String</td>
                    <td>无默认值</td>
                </tr>
                <tr>
                    <td>parentId</td>
                    <td>市区请求数据的上级ID，在type为city和district时不可缺少</td>
                    <td>String</td>
                    <td>无默认值</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>是否禁用</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>placeholder</td>
                    <td>未输入时显示的提示</td>
                    <td>String</td>
                    <td>请输入</td>
                </tr>
                <tr>
                    <td>placement</td>
                    <td>列表展开方向 有bottom 和 top 两种方式</td>
                    <td>String</td>
                    <td>bottom</td>
                </tr>
                <tr>
                    <td>filterable</td>
                    <td>是否支持搜索</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>innerStyle</td>
                    <td>自定义样式</td>
                    <td>Object</td>
                    <td>width: 200px</td>
                </tr>

                </tbody>
            </table>
            <div class="anchor">
                <!---->
                <!---->
                <h3 id="Select_events">address-input events</h3>
                <!---->
                <!---->
                <!---->
            </div>
            <table>
                <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>on-input</td>
                    <td>选中下拉框时填充输入框后触发的事件</td>
                    <td>返回选中项的id，和选中项的其他信息</td>
                </tr>
                <tr>
                    <td>select-change</td>
                    <td>选中下拉框时触发的事件</td>
                    <td>返回值同上</td>
                </tr>
                <tr>
                    <td>query-change</td>
                    <td>搜索词改变时触发的事件</td>
                    <td>搜索词</td>
                </tr>
                <tr>
                    <td>onload-success</td>
                    <td>加载数据成功时触发的事件</td>
                    <td>返回请求到的数据</td>
                </tr>
                <tr>
                    <td>on-error</td>
                    <td>请求数据失败的时候触发的事件</td>
                    <td>返回失败信息</td>
                </tr>
                <tr>
                    <td>before-load</td>
                    <td>请求数据之前触发的事件</td>
                    <td>无返回值</td>
                </tr>
                </tbody>
            </table>
            <div class="anchor">
                <!---->
                <!---->
                <h3 id="Select_methods">address-input methods</h3>
                <!---->
                <!---->
                <!---->
            </div>
            <table>
                <thead>
                <tr>
                    <th>方法名</th>
                    <th>说明</th>
                    <th>参数</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>getSelect</td>
                    <td>返回选中行的信息</td>
                    <td>-</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

</template>

<script>
    import hljs from 'highlight.js'

    export default {
        mounted: function () {
            window.setTimeout(function () {
                $('.demo-userComp-addressInput pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 100);
        },
      data () {
        return {
          provinceId: '',
          cityId: '',
          districtId: '',
          provinceId2: '402892ae5e713f05015e713f662b00e5',
          cityId2: '402892ae5e713f05015e713f669900f2',
          districtId2: '402892ae5e713f05015e713f66a700f4',
          htmlCode: '省：<address-input :type="\'province\'" @select-change="provinceSelect" :defaultValue="provinceId"></address-input>\n' +
          '<br/>\n' +
          '<br/>\n' +
          '市：<address-input :type="\'city\'" @select-change="citySelect" :defaultValue="cityId" :parentId="provinceId"></address-input>\n' +
          '<br/>\n' +
          '<br/>\n' +
          '区：<address-input :type="\'district\'" @select-change="districtSelect" :defaultValue="districtId" :parentId="cityId"></address-input>'
        }
      },
      methods: {
        provinceSelect (val, row) {
          this.provinceId = val
        },
        citySelect (val) {
          this.cityId = val
        },
        districtSelect (val) {
          this.districtId = val
        },
        provinceSelect2 (val) {
          this.provinceId2 = val
        },
        citySelect2 (val) {
          this.cityId2 = val
        },
        districtSelect2 (val) {
          this.districtId2 = val
        }
      }
    }

</script>


<style scoped lang="scss">
    .demo-userComp-addressInput{
        margin: 40px;
        .api table {
            font-family: Consolas,Menlo,Courier,monospace;
            font-size: 12px;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #e9e9e9;
            width: 100%;
            margin-bottom: 24px;
        }

        .api table td, .api table th {
            border: 1px solid #e9e9e9;
            padding: 8px 16px;
            text-align: left;
        }

        .api table th {
            background: #f7f7f7;
            white-space: nowrap;
            color: #5c6b77;
            font-weight: 600;
        }
    }

</style>
